<template>
  <div>组件演示</div>
  <div>
    组件的属性演示：
    <input type="text" v-model="comp_info" />
    {{ comp_info }}
  </div>
  <hr />

  <!-- @自定义事件就是监听事件 -->
  <MyComp :myprop="comp_info" @myevent="myhandle">
    <div> 王开利 </div>

    <template #fixed>
      <div>唐立志</div>
    </template>
  </MyComp>

  <hr />

  <my-comp>
    <div> 王开利1 </div>
  </my-comp>
</template>
<script setup>
import { ref } from 'vue';
import MyComp from '../../components/MyComp.vue';

const comp_info = ref('传给组件的变量');
// 监听组件自定义的事件
const myhandle = (info) => {
  console.log('监听到组件事件：', info);
};
</script>
<style scoped></style>
<!-- 
  作业，完成注册界面，附加作业：完成邮箱和手机注册 
-->
